<template>
  <panel title="店铺管理">
    <el-button slot="btn" @click="submit">保存</el-button>

    <el-form label-width="80px" class="formBox">
      <el-form-item label="店铺名称">
        <el-input v-model="shopList.name"></el-input>
      </el-form-item>

      <el-form-item label="店铺公告">
        <el-input type="textarea" v-model="shopList.bulletin"></el-input>
      </el-form-item>

      <el-form-item label="店铺头像">
        <el-upload
          class="avatar-uploader"
          :on-success="success"
          :action="BASE_URL + '/shop/upload'"
          :show-file-list="false"
        >
          <img
            style="width: 178px; height: 178px"
            v-if="shopList.avatar"
            :src="BASE_URL + '/upload/shop/' + shopList.avatar"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="店铺图片">
        <div class="imgBox" v-for="(item, index) in shopList.pics" :key="index">
          <span @click="close(index)" class="fontImg">x</span>
          <img style="width:178px;height:178px;margin-right:10px" :src="BASE_URL + '/upload/shop/' + item" alt="">
        </div>
        
        <el-upload
          class="avatar-uploader"
          :on-success="editImg"
          :action="BASE_URL + '/shop/upload'"
          :show-file-list="false"
        >
          <i
            style="font-size: 30px; border: 1px dashed #ccc; padding: 73px"
            class="el-icon-plus avatar-uploader-icon"
          ></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="配送费">
        <el-input v-model="shopList.deliveryPrice"></el-input>
      </el-form-item>

      <el-form-item label="配送时间">
        <el-input v-model="shopList.deliveryTime"></el-input>
      </el-form-item>

      <el-form-item label="配送描述">
        <el-input v-model="shopList.description"></el-input>
      </el-form-item>

      <el-form-item label="起送价格">
        <el-input v-model="shopList.minPrice"></el-input>
      </el-form-item>

      <el-form-item label="店铺评分">
        <el-input v-model="shopList.score"></el-input>
      </el-form-item>

      <el-form-item label="销量">
        <el-input v-model="shopList.sellCount"></el-input>
      </el-form-item>

      <el-form-item label="活动">
        <el-checkbox-group v-if="shopList.supports" v-model="shopList.supports">
          <el-checkbox
            v-for="(item, index) in activity"
            :key="index"
            :label="item"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <el-form-item label="营业时间">
        <el-time-picker
          is-range
          v-model="value1"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
    </el-form>
  </panel>
</template>

<script>
import { shopInfoReq, shopEditReq } from "@/api/shop.api";
import { BASE_URL } from "@/utils/common";
import dayjs from "dayjs";
export default {
  data() {
    return {
      shopList: {},
      BASE_URL,
      activity: [
        "在线支付满28减5",
        "单人精彩套餐",
        "VC无限橙果汁全场8折",
        "特价饮品八折抢购",
        "国庆特价",
        "中秋特惠",
      ],
      value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
    };
  },

  methods: {
    async getShop() {
      const res = await shopInfoReq();
      console.log(res);
      this.shopList = res.data.data;
      console.log(this.shopList.date);
      this.value1 = this.shopList.date
    },

    success(res) {
      // console.log(res);
      let avatar = res.imgUrl.split("/").pop();
      // console.log(avatar);
      this.shopList.avatar = avatar;
    },

    editImg(res) {
      let avatar = res.imgUrl.split("/").pop();
      this.shopList.pics.push(avatar);
    },

    submit() {
      console.log(this.value1);
      this.shopList.date = this.value1.map((item) =>
        dayjs(item).format("YYYY-MM-DD HH:mm:ss")
      );
      console.log(this.shopList.date);
      shopEditReq(this.shopList).then((res1) => {
        console.log(res1);
        this.$message({
          message: res1.data.msg,
          type: "success",
        });
      });
    },

    close(index){
      this.shopList.pics.splice(index,1)
    }

  },

  created() {
    this.getShop();
  },

  mounted(){
    console.log(this.$refs); 
  }
};
</script>

<style lang="less" scoped>
.el-button {
  background: #409eff;
  color: #fff;
}


.formBox{
  width: 800px;
}

.imgBox{
  display: inline-block;
  position: relative;
  .fontImg{
    font-size: 24px;
    position: absolute;
    right: 15px;
    top: -10px;
    color: red;
    display: none;
  }
}

.imgBox:hover .fontImg{
  display: block;
}

</style>